<!-- 发需求 -->
<template>
  <scroll-view scroll-y style="height: 100vh">
    <view>
      <u-swiper
        v-if="state.swiperlist.length > 0"
        :list="state.swiperlist"
        keyName="img_show"
        showTitle
        :autoplay="false"
        circular
        :height="state.swiperHeight + 'px'"
        imgMode="aspectFit"
      ></u-swiper>
      <u-empty
        mode="data"
        text="暂无数据"
        v-else
        marginTop="5vh"
        :icon="getResource('img/phone/mini/no_data.png')"
      />
      <view style="padding-bottom: 15vh">
        <view
          v-for="(item, index) in state.list"
          :key="index"
          :class="['list-item', getBgClass(index)]"
          style="
            display: flex;
            justify-content: space-between;
            margin: 20px;
            padding: 15px;
            border-radius: 10px;
            align-items: center;
            box-shadow: 0px 0px 10px rgba(214, 214, 214, 0.9);
            position: relative;
            overflow: hidden;
          "
          @click="clickList(item.id)"
        >
          <!-- 文字内容（z-index确保在装饰元素上方） -->
          <view style="position: relative">
            <view style="font-weight: bold; font-size: 16px"
              ><span style="font-size: 24rpx; margin-right: 10rpx">⭐</span>️{{
                item.title
              }}</view
            >
            <view
              style="
                margin-top: 10px;
                color: #666;
                width: 57vw;
                color: #aaaaaa;
                font-size: 24rpx;
              "
            >
              {{ item.content }}
            </view>
          </view>

          <!-- 图片区域（z-index确保在装饰元素上方） -->
          <view style="position: relative">
            <I-Images
              lazyLoad
              :src="getResource(`img/phone/mini/issue/index_${index}.png`)"
              :mode="aspectFill"
              showLoading
              showError
              width="40px"
              height="40px"
              fade
            >
            </I-Images>
          </view>
        </view>
      </view>

      <Tabbar :index="1" />
    </view>
  </scroll-view>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import { getResource } from "@/utils/Resource.js";
import { getBanner } from "@/api/userInfo.js";
import { onLoad } from "@dcloudio/uni-app";
import { showToast, showModalNoCancel } from "@/utils/toast";
import { getLoginInfo } from "@/api/userInfo";

onLoad(async (e) => {
  if (e.id) {
    state.formId = e.id;
    state.listIndex = e.type;
    await skip(Number(e.type));
  }
});
const state = reactive({
  swiperHeight: "",
  formId: null,
  listIndex: null,
  swiperlist: [],
  list: [
    {
      id: 3,
      title: "发布物资采购需求",
      content: "发布电力工程有关的各种材料、设备、工具等。",
    },
    {
      id: 2,
      title: "发布找工程公司需求",
      content:
        "找承包商、找资质挂靠、赚居间费、合作施工等，各种合作模式都可以。",
    },
    {
      id: 6,
      title: "发布找劳务队伍需求",
      content: "海量专业劳务队伍随时待命。",
    },
    {
      id: 4,
      title: "发布找设计公司需求",
      content: "找设计、有项目找挂靠、介绍业务赚居间费等，快来发布。",
    },
    {
      id: 5,
      title: "发布找监理公司需求",
      content: "找监理、有项目找挂靠、介绍业务赚居间费等，快来发布。",
    },
  ],
});

const init = async () => {
  try {
    const systemInfo = uni.getSystemInfoSync();
    const screenWidth = systemInfo.windowWidth;
    state.swiperHeight = screenWidth * 0.4875; // 按比例计算高度
    const res = await getBanner("3");
    state.swiperlist = res.data;
  } catch (error) {}
};
init();
// 根据索引返回不同的背景类名（循环使用3种渐变）
const getBgClass = (index) => {
  const classes = ["blue", "pink", "green"];
  return classes[index % classes.length];
};
const clickList = async (id) => {
  state.listIndex = id;
  await skip(id);
};

const skip = async (id) => {
  let userinfo = null;
  // 尝试从本地存储读取
  userinfo = uni.getStorageSync("userinfo") || null;
  // 如果没有 userinfo，尝试从接口获取
  if (!userinfo) {
    try {
      const res = await getLoginInfo();
      userinfo = res.data;
      // 保存到本地存储
      uni.setStorageSync("userinfo", userinfo);
    } catch (error) {
      console.error("获取登录信息失败:", error);
      showModalNoCancel("错误", "获取登录信息失败");
      return;
    }
  }
  // 检查企业状态
  if (userinfo.company_status != 3) {
    showModalNoCancel("系统消息", "请于认证企业后使用", null);
    return;
  }
  uni.navigateTo({
    url: `/pages_index/demand/component/dataForm?type=${id}`,
  });

  // switch (id) {
  //   case 0:
  //     uni.navigateTo({
  //       url: "/pages_index/demand/component/purchase",
  //     });
  //     break;
  //   case 1:
  //     uni.navigateTo({
  //       url: "/pages_index/demand/component/project",
  //     });
  //     break;
  //   case 2:
  //     uni.navigateTo({
  //       url: "/pages_index/demand/component/dataForm",
  //     });
  //     break;
  //   case 3:
  //     uni.navigateTo({
  //       url: "/pages_index/demand/component/designForm",
  //     });
  //     break;
  //   case 4:
  //     uni.navigateTo({
  //       url: "/pages_index/demand/component/supervisorForm",
  //     });
  //     break;
  //   default:
  //     break;
  // }
};
</script>

<style scoped>
.list-item {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.list-item::before {
  content: "";
  display: block;
  position: absolute;
  left: -3.5rem;
  width: 300px;
  height: 600px;
  border-radius: 100%;
  background: #ffffff;
  transform: rotate(55deg);
}

/* 1. 蓝色渐变背景 */
.list-item.blue {
  background: linear-gradient(135deg, #eef7ff, #e6f2ff);
}

/* 2. 粉色渐变背景 */
.list-item.pink {
  background: linear-gradient(135deg, #feedf5, #fee3ea);
}

/* 3. 绿色渐变背景 */
.list-item.green {
  background: linear-gradient(135deg, #eefef1, #dbf6e5);
}
</style>
